<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: mao;
            src: url('./font/maozedong.ttf');
        }

        article.a1 {
            height: 400px;
            border: 1px solid black;
            writing-mode: vertical-rl;
            font-family: mao;
            font-size: 30px;
        }

        article.a1 h1 {
            font-size: 1.5em;
        }

        article.a1 p {
            line-height: 1.5;
        }

        p.p2 {
            width: 400px;
            border: 1px solid black;
        }

        .a2 .p2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            /*显示行数*/
            overflow: hidden;
        }
    </style>
</head>

<body>
    <article class="a1">
        <h1>沁园春·雪</h1>
        <p>
            北国风光，千里冰封，万里雪飘。
            望长城内外，惟余莽莽；大河上下，顿失滔滔。
            山舞银蛇，原驰蜡象，欲与天公试比高。
            须晴日，看红装素裹，分外妖娆。
            江山如此多娇，引无数英雄竞折腰。
            惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
            一代天骄，成吉思汗，只识弯弓射大雕。
            俱往矣，数风流人物，还看今朝。
        </p>
        <p>毛泽东作于一九三二年六月</p>
    </article>
    <article class="a2">
        <p class="p2">北国风光，千里冰封，万里雪飘。 望长城内外，惟余莽莽；大河上下，顿失滔滔。 山舞银蛇，原驰蜡象，欲与天公试比高。 须晴日，看红装素裹，分外妖娆。 江山如此多娇，引无数英雄竞折腰。
            惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。 一代天骄，成吉思汗，只识弯弓射大雕。 俱往矣，数风流人物，还看今朝。</p>
    </article>
</body>

</html>